<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>PC-drag</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url('img3/bg.jpg') repeat;
        }
        .div{
            position:absolute;
            border:1px dashed blue;
            width:0px;
            height:0px;
            left:0px;
            top:0px;
            overflow:hidden;
        }
        .retc{
            position:absolute;
            border:1px solid #CCCCCC;
            overflow:hidden;
            background:#EFEFEF
        }
    </style>
</head>
<body>
<script>
    /**
     *
     * parseInt(String,radix)
     * radix:基数。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
     *
     * 做出鼠标拖动域效果：
     * 1.找出起始点：(各种不同方向的拖动，起始点是不一样的)
     * 2.计算出width,height;
     * */
    var sx,sy;
    var fx,fy;
    var w,h;
    var oDiv;
    var index=1;
    var imgArr=[];
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
    document.addEventListener("touchstart",start)
    document.addEventListener("touchmove",move)
    document.addEventListener("touchend",end)
    for(var i=0;i<=20;i++){
        imgArr.push("img3/"+i+".jpg");
    }
    function start(e) {
        //获取开始位置
        sx=e.touches[0].clientX;
        sy=e.touches[0].clientY;
        oDiv=document.createElement("div");
        oDiv.className='div';
        oDiv.id=index++;
        document.body.appendChild(oDiv);
    }
    function move(e) {
        fx=e.touches[0].clientX;
        fy=e.touches[0].clientY;
        //w=fx>sx?fx-sx:sx-fx;
        w=Math.abs(fx-sx);
        h=Math.abs(fy-sy);
        oDiv.style.left =fx>sx?sx +"px":sx-w+"px";
        oDiv.style.top = fy>sy?sy +"px":sy-h+"px";
        oDiv.style.width=w+"px";
        oDiv.style.height=h+"px";
    }
    function end() {
        index=parseInt(21*Math.random());
        oDiv.style.background='url(img3/'+index+'.jpg) center/100% 100%';
        oDiv.style.border="none"
    }
</script>
</body>
</html>